<template >
    <div id="carousel">
      <el-carousel :interval="3000" :trigger="click" type="always" :height="height">
        <img :src=" 'http://'+baseUrl+'/' + topImg"  alt="" data-v-26084dc2="" style="width: 100%; height: 100%;transform: translateX(0px) scale(1);">
        <el-carousel-item v-for="item in imgs" :key="item">
          <img :src=" 'http://'+baseUrl+'/' + item"   style="width: 100%;height: 100%;" alt="">
        </el-carousel-item>
      </el-carousel>
    </div>
    <div id="form">
      <el-form :label-position="labelPosition" ref="form" :model="formLabelAlign" label-width="100px">
        <div class="box-card">
          <div class="loginTitle">{{ homes.title }}</div>
          <div class="enLoginTitle">{{ homes.en_title }}</div>
          <el-form-item>
            <el-input placeholder="请输入账号" v-model="formLabelAlign.username" type="text" class="username" prefix-icon="el-icon-login-user"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="formLabelAlign.password" type="password" placeholder="请输入登录密码" class="password"  prefix-icon="el-icon-login-password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="onSubmit">登录</el-button>
          </el-form-item>
          <!-- 处理弹窗 -->
          <el-popover
              placement="top-start"
              title="请通过以下方式联系管理"
              :width="550"
              trigger="click"
          >
            <!-- <p>官方微信:{{ authorityLab.wechat }}, 官方电话：{{ authorityLab.phone }}</p> -->
            <div>
              <img style="width: 150px;height: 150px;" src="../.././public/staic/img/code.png">
            </div>
            <template #reference>
              <div id="getPass"><span class="explain">忘记密码？</span>请联系管理员</div>
            </template>
          </el-popover>
        </div>
      </el-form>
    </div>
</template>

<script setup>
//我想改成setup， 下面是原来的。改不明白了这是要改的
import {defineComponent, onMounted, ref, watch} from 'vue'
import  * as api from "../api/loginHttp.js";
import {ElMessage} from "element-plus";
import http, {baseUrl} from "../utils/http";
import {useRouter} from "vue-router"
const imgUrl = ref()

const router = useRouter()
const formLabelAlign = ref({
      username: '',
      password: '',
    })

const authorityLab = ref({
  wechat: '',
  phone: '',
})
const topImg = ref()

const homes = ref({
  'title':'营养测评管理系统',
  'en_title': 'Child nutrition evaluation management system',
})

const imgs = ref({

})

const height = ref('980px')

const  onSubmit = async () =>{

  let params = {
    'account': formLabelAlign.value.username,
    'password': formLabelAlign.value.password,
  }
  const res = await api.userLogin(params);
  if(res.data.code === 1) {
    
    let user = res.data.data.userinfo
    let token = user.token
    let adminName = user.adminname
    let MemberId = user.user_id
    let username = user.username
    imgUrl.value = "http://"+baseUrl+'/';
    let Avatar = user.avatar
    let codes=user.ercode;

    window.localStorage.setItem("Token", token);
    window.localStorage.setItem("Title", adminName);
    window.localStorage.setItem("Username", username);
    window.localStorage.setItem("MemberId", MemberId);
    window.localStorage.setItem("Avatar", imgUrl.value + Avatar);
    window.localStorage.setItem("ercode",codes );
    // console.log(window.localStorage.getItem("Token"));
    // return;
    // this.$store.commit('saveToken',token)
    // this.$store.saveToken('token', token)
    // this.$store.saveUserId('userId', res.data.data.userinfo.user_id)
    // this.$store.saveUsername('username', res.data.data.userinfo.username)
    // this.$store.saveAdminName('adminname', res.data.data.userinfo.adminname)
    // this.$store.saveAdminId('adminId', res.data.data.userinfo.admin_id)
    await router.push({'path': '/Home/'})
    // this.$store.commit('getuserinfo',res.data.data.userinfo)
    // localStorage.setItem('username',res.data.data.userinfo.username)
  } else {
    ElMessage.error(res.data.msg)
  }
}

const fetchData = async () =>{
  height.value = window.innerHeight - 30 + 'px';
  const data = await api.getWebInfo();
  if(data.data.code === 1) {
    topImg.value = data.data.data.imgs[0];
    imgs.value = data.data.data.imgs;
    authorityLab.value.wechat = data.data.data.vchat;
    authorityLab.value.phone = data.data.data.mobile;
  } else {
    ElMessage.error(data.data.msg)
  }
}
//自动加载
onMounted(() => {
  fetchData()
})





</script>
<style scoped>
/deep/ .el-input--prefix .el-input__inner {
    padding-left: 50px;
  }
/deep/ .el-button {
  border-radius: 8px;
  background: #2AB28B;
  width: 100%;
  color: #FFFFFF;
  height: 70px;
}
/deep/ .el-button:hover {
  border-radius: 8px;
  background: #3DAF76;
  width: 100%;
  color: #FFFFFF;
  height: 70px;
}
/deep/ .el-button:focus {
  border-radius: 8px;
  background: #3DAF76;
  width: 100%;
  color: #FFFFFF;
  height: 70px;
}
/deep/ .el-carousel__button {
  border-radius: 8px;
  display: block;
  opacity: .48;
  width: var(--el-carousel-indicator-width);
  height: 7px;
  background-color: #3DAF76;
  border: none;
  outline: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: var(--el-transition-duration);
}
/deep/ .el-carousel__arrow{
  background-color: #2AB28B;
}
/deep/ .el-carousel__arrow:hover{
  background-color: #3DAF76;
}

.el-carousel__item h3 {
  height: 100%;
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}


.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>

<style>
.el-carousel--horizontal{
  overflow: hidden;
}
/*:root{*/
/*  background: linear-gradient(92deg, #2AB28B 0%, #2FA76B 100%);*/
/*}*/
  .username .el-input__icon {
    background: url(../assets/img/login_username.png) center no-repeat;
    background-size: contain;
  }

  .password .el-input__icon {
    background: url(../assets/img/login_password.png) center no-repeat;
    background-size: contain;
  }

.el-input--prefix .el-input__inner{
    border: 0px;
    border-radius: 0%;
    border-bottom:1px solid #ccc;
    font-size: 20px;
    color:#999999;
    height: 60px;
  }
  .box-card {
    border:none;
    position: absolute;
    top: calc(210px);
    left: calc(65%);
    width: 30%;
    height: 350px;
    border-radius: 3%;
  }

  .loginTitle {
    font-size:34px;
    text-align:center;
    color:#2AB28B;
    padding-bottom: 10px;
  }
  .enLoginTitle {
    padding-bottom: 20px;
    color: #2AB28B;
    font-size: 14px;
    text-align: center;
    margin-bottom: 84px;
  }
  #getPass{
    text-align: center;
    width: 100%;
  }
  .explain{
    width: 100%;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    color: #2AB28B;
    margin-top: 20px;
    cursor: pointer;
  }
#carousel {
  border:none;
  position: absolute;
  top: calc(15px);
  left: calc(15px);
  width: 60%;
  border-radius: 3%;

}
#form {
  float: left;
  width: 30%;
}


</style>
